<script setup lang="ts">
import {ElMessage, ElMessageBox} from "element-plus";
import { useRouter } from "vue-router"; // 引入路由钩子
import {require} from "@/utils/getFileUrl.ts";
import {updateGameIncard} from "@/utils/game.ts";
import getNewPrices from "@/utils/getNewPrices.ts";

const router = useRouter(); // 获取路由实例

// 添加至购物车弹窗功能
const showAddToCartPopup = async () => {
  const game = JSON.parse(router.currentRoute.value.query.game as string);

  try {
    // 调用后端接口更新 inCard 字段
    await updateGameIncard(game.id);

    // 显示提示框
    ElMessageBox.confirm(
        "游戏已添加至购物车",
        "操作成功",
        {
          confirmButtonText: "查看购物车",
          cancelButtonText: "继续浏览",
          type: "success"
        }
    )
        .then(() => {
          router.push("/shoppingCar");
        })
        .catch(() => {
          // 关闭弹窗
        });

  } catch (error) {
    console.error("添加购物车失败", error);
    ElMessage.error("添加购物车失败，请重试");
  }
};
const game = JSON.parse(router.currentRoute.value.query.game as string);

</script>

<template>
  <div class="detailsContent">
    <div class="gameContent">
      <div class="gameImg">
        <img :src="require('@/assets/img/'+game.img)">
      </div>
      <div class="gameInfo">
        <div class="gameDetail">
          <img :src="require('@/assets/img/'+game.img)">
          <span style="font-weight: 700;font-size: 23px">{{game.name}}</span>
          <span style="font-size: 14px;color: rgba(112,128,144,0.82)">游戏介绍：商家是一个懒人，没有介绍，爱玩不玩</span>
        </div>
        <div class="info">
          <span style="font-size: 14px;color: rgba(112,128,144,0.82)">游戏类型：{{game.type}}</span>
          <span style="font-size: 14px;color: rgba(112,128,144,0.82)">发布日期：{{game.time}}</span>
          <span style="font-size: 14px;color: rgba(112,128,144,0.82)">游戏厂家：凡在本平台发布的游戏，狐大平台享有最终解释权</span>
        </div>
      </div>
    </div>
    <div class="gameBuyContent">
      <div class="gameBuy">
        <span style="color: white;font-size: 50px">购买：{{game.name}}</span>
        <div class="buyBox myFlex-x">
          <div class="gameDiscount myFlex-x">
            -{{100-(game.discount*100)}}%
          </div>
          <div class="gamePrice myFlex-y">
            <del style="font-size: 15px;color: #728693">￥{{ game.price }}</del>
            <span style="font-size: 15px;color: #beee11">￥{{getNewPrices(game.price,game.discount)}}</span>
          </div>
          <div class="buyCar myFlex-x" @click="showAddToCartPopup">
            添加至购物车
          </div>
        </div>
      </div>
      <div class="gameTag">
        <button class="custom-button">
          <el-icon><Avatar /></el-icon>平台成就
        </button>
        <button class="custom-button">
          <el-icon><document /></el-icon>更新记录
        </button>
        <button class="custom-button">
          <el-icon><bell /></el-icon> 游戏新闻
        </button>
        <button class="custom-button">
          <el-icon><medal /></el-icon> 获得奖项
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import "@/assets/css/detailes.css";
</style>